<template>
  <!-- 搜索条 -->
  <el-card class="tooltip-wrapper">
    <h2 v-if="config.title">{{ config.title }}</h2>
    <div class="tooltip">
      <el-form
        class="filter-input"
        :inline="true"
        :model="queryParams"
        @keyup.enter="config.operation.search && config.operation.search.handle"
        @submit.prevent
      >
        <template v-for="filter in config.filters">
          <el-form-item
            v-if="!filter.hidden"
            :key="filter.key"
            :prop="filter.key"
            :label="filter.label"
          >
            <!-- 输入框 -->
            <el-input
              v-if="filter.type === 'input'"
              v-model="queryParams[filter.key]"
              :style="{
                width: filter.width || '240px'
              }"
              :placeholder="'请输入'"
            >
              <template #suffix>
                <i v-if="filter.unit" class="inputUnit" style="margin-right: 10px">{{
                  filter.unit
                }}</i>
              </template>
            </el-input>
            <!-- 数字输入框 -->
            <el-input
              v-if="filter.type === 'number'"
              v-model="queryParams[filter.key]"
              :placeholder="'请输入'"
              :style="{
                width: filter.width || '240px'
              }"
              onkeyup="value=value.replace(/[^\d]/g,'')"
            >
              <template #suffix>
                <i v-if="filter.unit" class="inputUnit" style="margin-right: 10px">{{
                  filter.unit
                }}</i>
              </template>
            </el-input>
            <!-- 日期范围 -->
            <el-date-picker
              v-if="filter.type === 'daterange'"
              v-model="queryParams[filter.key]"
              :type="filter.dateType || 'daterange'"
              class="date-picker-input"
              :value-format="filter.valFormat"
              :format="filter.format"
              :clearable="false"
              :style="{
                width: filter.width
              }"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
              ></el-date-picker
            >
            <!-- 下拉框 -->
            <el-select
              v-if="filter.type === 'select'"
              v-model="queryParams[filter.key]"
              :clearable="!filter.unClearable"
              :placeholder="'请选择'"
              :multiple="filter.multiple"
              :style="{
                width: filter.width || '240px'
              }"
              @change="selectChange(filter)"
            >
              <el-option
                v-for="(item, index) in filter.options"
                :key="index"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
            <!-- 联级选择器 -->
            <el-cascader
              v-if="filter.type === 'cascader'"
              v-model="queryParams[filter.key]"
              :options="filter.options"
              clearable
              collapse-tags
              :style="{
                width: filter.width || '240px'
              }"
              :props="filter.props || { checkStrictly: true }"
            ></el-cascader>

            <!-- 自定义选择器 -->
            <component
              :is="filter.component"
              v-if="filter.component"
              :filter="filter"
              @checkVal="getComponentVal"
            ></component>
          </el-form-item>
        </template>

        <!-- 过滤器图标 如果有额外过滤选项配置 就渲染 -->
        <el-form-item v-if="config.moreFilter">
          <div
            :class="{ filterBtn: true, open: config.moreFilter.visible }"
            @click="config.moreFilter.handleFilter"
          >
            <div class="fiterIcon iconfont icon-filter"></div>
          </div>
        </el-form-item>
      </el-form>
      <div class="action-wrapper">
        <!-- 中间额外自定义操作按钮 -->
        <template v-if="config.extraOperations">
          <template v-for="(operation, index) in config.extraOperations || []">
            <component
              :is="operation.component"
              v-if="operation.component && operation.perm"
              :key="index"
              :operation="operation"
            ></component>
            <el-button
              v-if="!operation.component && operation.perm"
              :key="index"
              :icon="operation.icon"
              @click="operation.handle(queryParams)"
              >{{ operation.text }}</el-button
            >
          </template>
        </template>
        <!-- 右侧操作按钮 可自行增删 -->
        <!-- 搜索 -->
        <el-button
          v-if="config.operation && config.operation.search"
          type="primary"
          icon="iconfont icon-chaxun"
          @click="config.operation.search.handle(queryParams)"
          >{{ config.operation.search.text }}</el-button
        >
        <!-- 新增 -->
        <el-button
          v-if="config.operation && config.operation.add && config.operation.add.perm"
          type="primary"
          icon="iconfont icon--tainjia"
          @click="config.operation.add.handle"
          >{{ config.operation.add.text }}</el-button
        >
        <!-- 权限范围 -->
        <el-button
          v-if="config.operation && config.operation.permArea && config.operation.permArea.perm"
          type="primary"
          icon="iconfont icon-quanxian"
          @click="config.operation.permArea.handle"
          >{{ config.operation.permArea.text }}</el-button
        >
        <!-- 删除 -->
        <el-button
          v-if="config.operation && config.operation.del && config.operation.del.perm"
          :disabled="config.operation.del.handleDisabled && config.operation.del.handleDisabled()"
          icon="iconfont icon-shanchu1"
          @click="config.operation.del.handle(queryParams)"
          >{{ config.operation.del.text }}</el-button
        >
        <!-- 导入 -->
        <el-button
          v-if="config.operation && config.operation.import && config.operation.import.perm"
          type="warning"
          icon="iconfont icon-daoru-tianchong"
          @click="config.operation.import.handle"
          >{{ config.operation.import.text }}</el-button
        >
        <!-- 导出 -->
        <el-button
          v-if="config.operation && config.operation.export && config.operation.export.perm"
          type="warning"
          icon="iconfont icon-daochu-tianchong"
          @click="config.operation.export.handle"
          >{{ config.operation.export.text }}</el-button
        >
        <!-- 粘贴 -->
        <el-button
          v-if="config.operation && config.operation.clipboard && config.operation.clipboard.perm"
          type="primary"
          icon="iconfont icon-clippy"
          @click="config.operation.clipboard.handle"
          >{{ config.operation.clipboard.text }}</el-button
        >
      </div>
    </div>

    <!-- 额外的过滤选项 -->
    <template v-if="config.moreFilter">
      <AddtionalFilters :config="config.moreFilter" @submit="addtionalSubmit" />
    </template>
  </el-card>
</template>

<script lang="ts">
import AddtionalFilters from '@/components/additionalFilters/index.vue'
import { ref, onBeforeMount, defineComponent, PropType } from 'vue'

export default defineComponent({
  components: { AddtionalFilters },
  props: {
    config: {
      type: Object as PropType<CSSearchConfig>,
      default() {
        return {}
      }
    }
  },
  setup(props: any) {
    // 初始化参数
    const queryParams = ref<any>({})

    // 单选框选中时 调用外部自定义方法
    const selectChange = filter => {
      if (filter.handleChange) filter.handleChange(queryParams.value[filter.key])
    }

    // 接收AddtionalFilters附加参数
    const addtionalSubmit = (params: Record<string, string | boolean | string[] | Date[]>) => {
      Object.assign(queryParams.value, params)
    }

    // 接收自定义选项组件的值
    const getComponentVal = (val: string | boolean | string[] | Date[], key: string) => {
      queryParams.value[key] = val
    }

    // 初始化默认参数
    onBeforeMount(() => {
      queryParams.value = { ...(props.config.defaultParams || {}) }
    })

    return {
      queryParams,
      selectChange,
      addtionalSubmit,
      getComponentVal
    }
  }
})
</script>
<style lang="scss" scoped>
.tooltip-wrapper {
  overflow: visible;
  position: relative;
  margin: 22px 0;
}
.tooltip {
  display: flex;
  justify-content: space-between;
  box-sizing: content;
  .date-picker-input {
    width: 250px;
  }
  .action-wrapper {
    min-width: 150px;
    // margin-top: 10px;
    margin-right: 10px;
    text-align: right;
  }
  .filterBtn {
    width: 48px;
    height: 48px;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    border-radius: 2px;
    cursor: pointer;
    .fiterIcon {
      // width: 20px;
      // height: 20px;
      margin: 0;
    }
  }
  .open {
    border: 1px solid #3e8ef7;
    color: #3e8ef7;
  }
}
.tooltip-wrapper,
.table-wrapper {
  *,
  *::before,
  *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .el-card__body {
    height: 100%;
  }
}
</style>
